<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>会员注册</title>
<script src="js/jquery.qrcode.min.js"></script>


<link rel="icon" href="${pageContext.request.contextPath}/img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css" />
<script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery-ui.structure.min.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery-ui.min.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery-ui.theme.min.css" />
<script src="${pageContext.request.contextPath}/js/jquery.validate.min.js" type="text/javascript"></script>

<style>
.error {
	color: red;
	font-size: 12px;
}
</style>


<script type="text/javascript">
	
	function checksubmit()
	{
	  if (document.form1.myname.value=="")
	        {
	           alert("请输入开始数值！");
	           document.form1.myname.focus();
	           return false;
	        } 
	          return true;  
	}

	$(function(){  
	    $("#getCode").removeAttr("disabled");  
	    //发送验证码  
	    $("#getCode").click(function(){   
	        $.ajax({  
	            url:"${pageContext.request.contextPath }/register?method=sendMessage",  
	            data:{  
	                "userphone":$("#userphone").val()  
	            },  
	            type:"post",  
	            async:false,  
	            dataType:"text",  
	            success : function(data) {  
	                if(data=='true'){  
	                    alert("验证码发送成功，收到后请输入验证码");  
	                    time(this);  
	                } else {  
	                    alert("验证码发送失败");  
	                }  
	            },  
	            error : function() {  
	                alert("error");  
	            }  
	        });  
	    });  
	    //验证  
	    /* $("#validate").click(function(){      
	        $.ajax({  
	            url:"${pageContext.request.contextPath }/register?method=verification",  
	            data:{  
	                "code":$("#code").val()  
	            },  
	            type:"post",  
	            async:false,  
	            dataType:"text",  
	            success : function(data) {  
	                if(data=='true'){  
	                    alert("恭喜您，验证成功");  
	                } else {  
	                    alert("验证失败");  
	                }  
	            },  
	            error : function() {  
	                alert("error");  
	            }  
	        });  
	    }); */  
	})  
	  
	//验证码倒计时  
	var wait = 60;  
	function time(obj) {  
	    if(wait==0) {  
	        $("#getCode").removeAttr("disabled");  
	        $("#getCode").val("获取验证码");  
	        wait = 60;  
	    }else {  
	        $("#getCode").attr("disabled","true");  
	        $("#getCode").val(wait+"秒后重试");  
	        wait--;  
	        setTimeout(function() {     //倒计时方法  
	            time(obj);  
	        },1000);    //间隔为1s  
	    }  
	}  
	
	$.validator.addMethod(
		"ischeckCode",
		function(value, element) {
			var flag = false;
			$.ajax({  
		        "async":false,  
		        "url":"${pageContext.request.contextPath }/register?method=verification",  
		        "data":{"code":value},  
		        "type":"POST",  
		        "dataType":"json", 
		        "success" : function(data) {  
		            flag = data.isExist;
		        }
		    });
		return flag;
	});

	$.validator.addMethod(
	"isMobile",
	function(value, element) {
		var length = value.length;
		var flag = false;
		var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
		$.ajax({
			"async" : false,
			"url" : "${pageContext.request.contextPath}/register?method=isMobile",
			"data" : {"userphone" : value},
			"type" : "POST",
			"dataType" : "json",
			"success" : function(data) {
				flag = data.isExist;
			}
		});
		//return this.optional((element)&& (length == 11) && mobile.test(value)&&(!flag));
		return !flag;
	});

	$(function() {
		$("#myform").validate({
			rules : {
				"username" : {
					"required" : true,
				},
				"password" : {
					"required" : true,
					"rangelength" : [ 6, 16 ]
				},
				"repassword" : {
					"required" : true,
					"rangelength" : [ 6, 16 ],
					"equalTo" : "#password"
				},

				"useremail" : {
					"required" : true,
					"email" : true
				},
				"sex" : {
					"required" : true
				},
				"userphone" : {
					"required" : true,
					"minlength" : 11,
					"isMobile" : true
				},
				"checkCode" : {
					"digits" : true,
					"required" : true,
					"ischeckCode":true
				}
				
			},
			messages : {
				"username" : {
					"required" : "用户名不能为空",
				},
				"password" : {
					"required" : "密码不能为空",
					"rangelength" : "密码长度6-16位"
				},
				"repassword" : {
					"required" : "密码不能为空",
					"rangelength" : "密码长度6-16位",
					"equalTo" : "两次密码不一致"
				},
				"useremail" : {
					"required" : "邮箱不能为空",
					"email" : "邮箱格式不正确"
				},
				"userphone" : {
					"required" : "请输入手机号",
					"minlength" : "确认手机不能小于11个字符",
					"isMobile" : "该手机号已被注册"
				},
				"checkCode" : {
					"required" : "请输入验证码",
					"digits" : "验证码应该输入数字",
					"ischeckCode":"验证码不符"
				}
				
			}
		});
	});
</script>

</head>
<body>

	<!-- 引入header.jsp -->
	<jsp:include page="header.jsp"></jsp:include>

	<div class="container"
		style="width: 100%; background: url('image/regist_bg.jpg');">
		<div class="row">
			<div class="col-md-2"></div>
			<div class="col-md-8"
				style="background: #fff; padding: 40px 80px; margin: 30px; border: 7px solid #ccc;">
				<font>会员注册</font>
				
				<form class="form-horizontal" id="myform" action="${pageContext.request.contextPath }/register?method=getForm1" method="post"  >
					<div class="form-group">
						<label for="username" class="col-sm-2 control-label">用户名</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" id="username" name="username" 
								placeholder="请输入您的姓名">
						</div>
					</div>
					<div class="form-group">
						<label for="username" class="col-sm-2 control-label">手机号码</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" id="userphone" name="userphone"
								placeholder="请输入您的手机号码">
						</div>
					</div>
					<div class="form-group">
						<label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
						<div class="col-sm-6">
							<input type="email" class="form-control" id="useremail" name="useremail"
								placeholder="Email">
						</div>
					</div>
						<div class="form-group">
						<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
						<div class="col-sm-6">
							<input type="password" class="form-control" id="password" name="password"
								placeholder="请输入密码">
						</div>
					</div>
					<div class="form-group">
						<label for="confirmpwd" class="col-sm-2 control-label">确认密码</label>
						<div class="col-sm-6">
							<input type="password" class="form-control" id="confirmpwd" name="repassword"
								placeholder="请输入确认密码">
						</div>
					</div>
					<div class="form-group opt">
						<label for="inlineRadio1" class="col-sm-2 control-label">性别</label>
						<div class="col-sm-6">
							<label class="radio-inline"> 
								<input type="radio" name="sex" id="sex1" value="男" >男
							</label> 
							<label class="radio-inline"> 
								<input type="radio" name="sex" id="sex2" value="女">女
							</label>
							<label class="error" for="sex" style="display:none ">请选择您的性别</label>
						</div>
					</div>
					<div class="form-group">
						<label for="date" class="col-sm-2 control-label">验证码</label>
						<div class="col-sm-3">
							<input type="text" class="form-control" id="code" name="checkCode">
						</div>
						<div class="col-sm-2">
							<button class="btn btn-default" type="submit" id="getCode">获取短信验证码</button>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<input type="submit" width="100" value="注册" name="validate" id="validate"
								style="background: red ; height: 35px; width: 100px; color: white;">
						</div>
					</div>
				</form>
			</div>
			<div class="col-md-2"></div>
		</div>
	</div>

	<!-- 引入footer.jsp -->
	<jsp:include page="footer.jsp"></jsp:include>

</body>
</html>